<template>
  <div class="login">
    <div class="head">
      <span>登录</span>
      <a class="arrow-left backpage" @click="back()">返回</a>
    </div>
    <div class="main">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="formName"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked">7天免登陆</el-checkbox>
      </el-form>
    </div>
    <div class="loginbtn" @click="submitForm1('ruleForm')">登录</div>
    <div class="reg">
      <span @click="goto()">立即注册</span>
    </div>
  </div>
</template>
<script>
import Qs from "qs";
export default {
  data: function() {
    return {
      checked: false,
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    goto() {
      this.$router.push({ path: "/reg" });
    },
    open2() {
      this.$message({
        message: "登陆成功",
        type: "success"
      });
    },
    open4() {
      this.$message.error("登陆失败");
    },
    back() {
      this.$router.go(-1);
    },

    submitForm1() {
      // window.console.log(this.$refs[formName]);
      this.$refs.formName.validate(async valid => {
        if (valid) {
          //需求：发起请求，实现登陆功能
          let { username: name, password } = this.ruleForm;
          let keep = this.checked;
          var datastr = Qs.stringify({ name, password, keep });
          // window.console.log( datastr);
          let { data } = await this.$axios.post(
            "http://119.23.142.232:11291/usersnew/login",

            datastr,

            {
              headers: { "Content-Type": "application/x-www-form-urlencoded" }
            }
          );
          //  window.console.log(data)

          //如果登陆成功，就把token存到本地存储，待会路由拦截的时候需要用到token来鉴权(鉴别你是否有权限进入该组件)
          if (data.code) {
            //登陆成功
            this.open2();
            // localStorage.setItem("Authorization", data.authorization);
            this.$store.commit("login", {
              username: name,
              Authorization: data.authorization
            });

            //跳转到我的页面
            let { targeturl } = this.$route.params;
            // window.console.log(targeturl);

            this.$router.push({ path: targeturl || "/my", query: { name } });
          } else {
            //登陆失败
            this.open4();
          }
        } else {
          // window.console.log("注册失败!!");
          this.open4();
          return false;
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
  .head {
    width: 100%;
    background: #fff;
    position: relative;
    span {
      font-size: 0.426667rem;
      line-height: 1.053333rem;
      border-bottom: 0.013333rem solid #e5e5e5;
    }
    a {
      position: absolute;
      left: 0.266667rem;
      font-size: 0.426667rem;
      line-height: 1.04rem;
      color: #000;
    }
  }
  .main {
    width: 8rem;
    margin: auto;
    margin-top: 0.666667rem;
  }
  .loginbtn {
    margin: auto;
    margin-top: 0.8rem;
    width: 8rem;
    height: 1.333333rem;
    background: #000;
    color: #fff;
    font-size: 0.4rem;
    line-height: 1.333333rem;
    // position: relative;
  }
  .reg {
    // position: absolute;
    // right: 0;
    // bottom: -1.133333rem;

    width: 8rem;
    margin: auto;
    span {
      color: #c3ad83;
      float: right;
      // display: inline-block;
      font-size: 0.426667rem;
      margin-top: 0.133333rem;
    }
  }
  .arrow-left::before {
    border-left: 0.053333rem solid #000;
    border-top: 0.053333rem solid #000;
    content: "";
    display: inline-block;
    height: 12px;
    transform: rotate(-45deg);
    vertical-align: middle;
    width: 12px;
  }
}
</style>